function getFirstUnit() {
	var map = document.getElementById('map');
	return map.firstChild;
}
function getLastUnit() {
	var map = document.getElementById('map');
	return map.lastChild;
}

var selected = null;
function setSelectedUnit(unit) {
//	if (!unit) return;

	if (selected) {
		selected.isSelected(false);
	}
	selected = unit;
	if (selected) {
		selected.isSelected(true);
//		setInformationBar(selected.name);
	}

//	setInformationBar(unit.name);
}
function setInformationBar(message) {
	if (message == null) return;

	var bar = document.getElementById('selection_text');
	if (!bar) return;

	bar.innerHTML = message;
}

var center_x = 0;
var center_y = 0;
function centerView() {
	if (!selected) {
		setSelectedUnit(getFirstUnit());
	}

	if (!selected) return;

	var x = 1*selected.x;
	var y = 1*selected.y;
	var dx = (x - center_x);
	var dy = (y - center_y);
	center_x = center_x + (dx / 10);
	center_y = center_y + (dy / 10);

	var map = document.getElementById('map');
	if (map != null) {
		map.style.marginLeft = -Math.round(center_x) +"px";
		map.style.marginTop  = -Math.round(center_y) +"px";
	}
}

function Event() {
	this.state = new EventState_Void(this);
	this.setState = function(state) {
		this.state = state;
	}

	this.update = function() {
		this.state.update();
	}

	this.loadEvent = function(eventMessage) {
		var eventqueue = document.getElementById("eventqueue");
		var event = document.createElement("div");
		event.innerHTML = eventMessage;
		eventqueue.appendChild(event);
	}

	this.displayingEvent = false;
	this.showNextEvent = function() {
		if (this.displayingEvent) return;

		var eventqueue = document.getElementById("eventqueue");
		var eventitem = eventqueue.firstChild;
		var eventMessage = eventitem.innerHTML;
		eventqueue.removeChild(eventitem);

		var id = "event"+ Math.random();

		var events = document.getElementById("events");
		events.appendChild(buildEvent(id, eventMessage));

		this.displayingEvent = setTimeout(function() {
			var events = document.getElementById("events");
			var event = document.getElementById(id);
			events.removeChild(event);

			this.displayingEvent = false;
			this.showNextEvent();
		}, 5000);
	}
}

var eventSteps = [1, 2, 4, 8, 16, 32, 48, 56, 60, 62, 63];
//var eventSteps = [63, 62, 60, 56, 48, 40, 32, 24, 16, 8, 4, 2, 1];
function EventState_Void(eventView) {

	this.eventView = eventView;
	this.update = function() {
		var eventqueue = document.getElementById("eventqueue");
		if (eventqueue.firstChild) {
			this.eventView.setState(new EventState_Add(this.eventView));
		}
	}
}
function EventState_Add(eventView) {
	this.eventView = eventView;
	this.count = 0;

	var events = document.getElementById("events");
	var eventqueue = document.getElementById("eventqueue");
	if (events && eventqueue) {
		var event = eventqueue.firstChild;
		var id = "event"+ Math.random();
		var eventMessage = event.innerHTML;
		eventqueue.removeChild(event);

		var event = buildEvent(id, eventMessage);
		event.style.top = "-64px";
		events.appendChild(event);
	}

	this.update = function() {
		this.count++;

		var events = document.getElementById("events");
		if (events) {
			events.firstChild.style.top = -64+eventSteps[this.count] +"px";
		}

		if (this.count >= eventSteps.length) {
			events.lastChild.style.top = "0px";

			this.eventView.setState(new EventState_Wait(this.eventView));
		}
	}
}
function EventState_Change(eventView) {
	this.eventView = eventView;
	this.count = 0;

	var events = document.getElementById("events");
	var eventqueue = document.getElementById("eventqueue");
	if (events && eventqueue) {
		var event = eventqueue.firstChild;
		var id = "event"+ Math.random();
		var eventMessage = event.innerHTML;
		eventqueue.removeChild(event);

		var event = buildEvent(id, eventMessage);
		event.style.top = "-64px";
//		event.style.top = "0px";
		events.appendChild(event);
	}

	this.update = function() {
		this.count++;

		var events = document.getElementById("events");
		if (events) {
//			events.firstChild.style.top = eventSteps[this.count] +"px";
			events.lastChild.style.top = -64+eventSteps[this.count] +"px";
//			events.firstChild.style.left = (eventSteps[this.count]/64*window.innerWidth) +"px";
//			events.lastChild.style.left = (-64+eventSteps[this.count])/64*window.innerWidth +"px";
		}

		if (this.count >= eventSteps.length) {
			events.removeChild(events.firstChild);
			events.lastChild.style.top = "0px";
			events.lastChild.style.left = "0px";

			this.eventView.setState(new EventState_Wait(this.eventView));
		}
	}
}
function EventState_Remove(eventView) {
	this.eventView = eventView;
	this.count = 0;

	this.update = function() {
		this.count++;

		var events = document.getElementById("events");
		if (events) {
			events.lastChild.style.top = -eventSteps[this.count] +"px";
		}

		if (this.count >= eventSteps.length) {
			events.removeChild(events.firstChild);

			this.eventView.setState(new EventState_Void(this.eventView));
		}
	}
}
function EventState_Wait(eventView) {
	this.count = 64;

	this.eventView = eventView;
	this.update = function() {
		if (this.count-- <= 0) {
			var eventqueue = document.getElementById("eventqueue");
			if (eventqueue.firstChild) {
				this.eventView.setState(new EventState_Change(this.eventView));
			} else {
				this.eventView.setState(new EventState_Remove(this.eventView));
			}
		}
	}
}
var eventView = new Event();

function update() {
	var t = setTimeout(function() { update(); }, 50);

	centerView();

	eventView.update();
}
